<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化开发</title>
</head>
<body>

<!--
    组件: 使用组件提高代码的复用
    步骤:
    1.创建组件对象
    2.注册组件
        1.全局注册
        2.局部注册
    3.使用组件


    组件间参数的传递
        父组件 - >子组件传递参数    v-bind:   props
        子组件  ->  父组件

-->
<div id="app">
    <h1>学生信息</h1>
<!--    <student name="jack" age="20" major="java"></student>-->
<!--    <student name="tom" age="30" major="java"></student>-->
    <student :name="name" :age="age" :major="major"></student>
    <teacher></teacher>

</div>
<script src="../js/vue.js"></script>
<script>

    // 创建组件对象
    const student = {
        template: `
            <div>
                <p>学生姓名:{{name}}</p>
                <p>学生年龄:{{stuAge}}</p>
                <p>学生专业:{{major}}</p>
                <button @click="addAge">+1</button>
            </div>
        `,
        data() {
            return {
                stuAge:this.age,
            }
        },
        // 在props声明接收的参数 和在data中定义的属性是一样的
        props:['name','age','major'],
        methods: {
            addAge(){   //   vue中不建议直接修改外部接收的参数 解决 : 在data中定义一个属性接收 外部传递的参数 然后修改自定义的属性
                this.stuAge++
            }
        }
    }

    const teacher = {
        template: `
            <div>
                <p>教师姓名:tom</p>
                <p>教师年龄:30</p>
            </div>
       `
    }

    // 注册组件 全局注册
    // Vue.component("student",student)

    const vm = new Vue({
        el: '#app',
        data: {
            name:'xiaoming',
            age:20,
            major:'web'
        },
        methods: {},
        components: {  //  组件的局部注册
            student,teacher
        }
    })
</script>

</body>
</html>
